<template>
  <div class="container">
    <el-dialog
      title="盘点差异明细详情"
      fullscreen
      :visible.sync="particularsDialog.dialogVisible"
      @open="getData"
      @close="confirm"
      center
    >
      <el-table :data="tableData" border style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="goods_name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="erp_goods_bar_code" label="商品条形码" align="center"></el-table-column>
        <el-table-column prop="typeMsg" label="出入库类型" align="center"></el-table-column>
        <el-table-column label="出入库价格" align="center" width="150px">
          <template slot-scope="scope">
            <el-input-number
            v-if="scope.row.type==1 && scope.row.status == 1"
              size="small"
              :precision="4"
              :controls="false"
              v-model="scope.row.inp_out_price"
              @change="inpVal(scope)"
            ></el-input-number>
            <div v-else>{{scope.row.inp_out_price}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="inp_out_num" label="出入库数量" align="center"></el-table-column>
        <el-table-column prop="inp_out_amount" label="差异金额" align="center"></el-table-column>
        <el-table-column prop="inp_out_qty" label="出入库件数" align="center"></el-table-column>
        <el-table-column prop="before_num" label="系统库存数量" align="center"></el-table-column>
        <el-table-column prop="before_qty" label="系统库存件数" align="center"></el-table-column>
        <el-table-column prop="real_num" label="实际盘点数量" align="center"></el-table-column>
        <el-table-column prop="real_qty" label="实际盘点件数" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
        <el-table-column prop="spec" label="规格" align="center"></el-table-column>
        <el-table-column prop="rk_spec" label="入库规格" align="center"></el-table-column>
        <el-table-column prop="class_name" label="分类名称" align="center"></el-table-column>
         <el-table-column prop="warehouse_code" label="仓库编码" align="center">

         </el-table-column>
         <el-table-column label="配送中心" width="200px" align="center">
          <template slot-scope="scope">
             <el-select
              :multiple="false"
              filterable
              remote
              center
              reserve-keyword
              v-model="scope.row.dcname"
              placeholder="请搜索选择配送中心"
              :remote-method="selectListsRemoteMethod"
              :loading="selectLists.loading"
              @change="distribution(scope)"
              :disabled='scope.row.status==1?false:true'
            >
              <el-option
                v-for="item in selectLists.option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
         </el-table-column>
        <el-table-column prop="warehouse_name" label="仓库名称" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <el-button
            v-if="scope.row.status == 1"
              size="small"
              type="danger"
              @click="remove(scope)"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  stockDetail,
  stockGoodDelete,
  setTakeStockDcInfo,
  setStockDetailPriceInput,
} from "@/api/check/superCheck";
import { selectRdcData } from "@/api/select/select";
export default {
  props: {
    particularsDialog: Object,
  },
  data() {
    return {
      tableData: [],
      selectLists: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false,
      },
      search: {
        selectnamecode: "",
      },
      selectList: "",
      warehouse_code: "",
    };
  },
  created() {},
  methods: {
    //关闭
    confirm() {
       this.tableData = []
      this.particularsDialog.dialogVisible = false;
    },
    // 获取数据
    getData() {
      // this.tableData = [];
      this.center = [];
      let data = {
        id: this.particularsDialog.id,
      };
      stockDetail(data)
        .then((res) => {
          if (res.code == 0) {
            res.data.stock_good_list.forEach((item) => {
              item.typeMsg = item.type == 1 ? "盘点入库" : "盘点出库";
            });
            this.tableData = res.data.stock_good_list;
            this.warehouse_code = res.data.stock_info.warehouse_code;
          }
        })
        .then((porp) => {
          this.getselsetData(porp);
        });
    },
    getselsetData() {
      let data = {
        page: 1,
        limit: 500,
        code_or_name: this.search.selectnamecode,
        warehouse_code: this.warehouse_code,
      };
      //获取配送中心
      selectRdcData(data).then((res) => {
        if (res.data.paginate.data) {
          this.selectLists.option = res.data.paginate.data.map((item) => {
            return {
              value: `${item.d_code}`,
              label: `${item.d_name}`,
              warehouse_code: `${item.warehouse_code}`,
            };
          });
        }
      });
    },
    inpVal(scope) {
      let data = {
        id: scope.row.id,
        price: scope.row.inp_out_price,
      };
      setStockDetailPriceInput(data).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: res.msg || res.message,
          });
          this.getData();
        }
      });
    },
    // 嵌套搜索配送方式数据
    selectListsRemoteMethod(query) {
      if (query !== "") {
        this.houseList(query);
      } else {
        this.selectLists.option = [];
      }
    },
    //获取配送数据
    houseList(query) {
      this.search.selectnamecode = query;
      this.getselsetData();
    },
    distribution(scope) {
      let arr = this.selectLists.option.filter((res) => {
        return res.value == scope.row.dcname;
      });
      this.distributionCenter = {
        dccode: arr[0].value,
        dcname: arr[0].label,
      };
      console.log(this.distributionCenter, 8888);
      this.setTakeStockDc(scope.row.id);
    },
    //修改配送中心
    setTakeStockDc(id) {
      let data = {
        id: id,
        dccode: this.distributionCenter.dccode,
        dcname: this.distributionCenter.dcname,
      };
      setTakeStockDcInfo(data).then((res) => {
        if (res.code == 0) {
          this.getData();
        }
      });
    },
    //删除
    remove(scope) {
      this.$confirm("是删除该商品?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: scope.row.id,
          };
          stockGoodDelete(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: res.msg || res.message,
              });
              this.getData();
            } else {
              this.$message({
                type: "info",
                message: res.msg || res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
  background-size: cover;
}
</style>